<template>
	<view class="container">
		<view class="content">
			<view class="info-item">
				<view class="label-container">
					<uni-icons type="shop" size="18"></uni-icons>
					<text class="label">门店名称</text>
				</view>
				<view class="value-container">
					<input type="text" placeholder="请输入门店名称" v-model="setData.store_name" />
				</view>
			</view>
			<view class="info-item">
				<view class="label-container">
					<uni-icons type="person" size="18"></uni-icons>
					<text class="label">联系人姓名</text>
				</view>
				<view class="value-container">
					<input type="text" placeholder="请输入联系人姓名" v-model="setData.contact_name" />
				</view>
			</view>
			<view class="info-item">
				<view class="label-container">
					<uni-icons type="phone" size="18"></uni-icons>
					<text class="label">联系电话</text>
				</view>
				<view class="value-container">
					<input type="number" placeholder="请输入联系电话" v-model="setData.mobile" />
				</view>
			</view>
			<view class="info-item">
				<view class="label-container">
					<uni-icons type="list" size="18"></uni-icons>
					<text class="label">行业</text>
				</view>
				<view class="value-container">
					<picker mode="selector" :range="shopTypeList" :value="shopTypeIndex" @change="handleShopTypeChange">
						<view class="picker-container">
							<text class="value">{{ selectedShopType }}</text>
							<uni-icons type="down"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="info-item">
				<view class="label-container">
					<uni-icons type="shop" size="18"></uni-icons>
					<text class="label">物品类型</text>
				</view>
				<view class="value-container">
					<picker mode="selector" :range="industryList" :value="industryIndex" @change="handleIndustryChange">
						<view class="picker-container">
							<text class="value">{{ selectedIndustry }}</text>
							<uni-icons type="down"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="info-item">
				<view class="label-container">
					<uni-icons type="map" size="18"></uni-icons>
					<text class="label">店铺地址</text>
				</view>
				<view class="value-container" @tap="openPicker">
					<input placeholder="请选择省市区" disabled type="text" v-model="pcavalue" />
					<uni-icons type="down"></uni-icons>
				</view>
			</view>
			<view class="info-item">
				<view class="label-container">
					<uni-icons type="map" size="18"></uni-icons>
					<text class="label">店铺详细地址</text>
				</view>
				<view class="value-container" @tap="chooseLocation">
					<view class="value" v-if="setData.address != ''">{{setData.address}}</view>
					<view class="value" v-else>详细地址</view>
					<uni-icons type="down"></uni-icons>
				</view>
			</view>
			<!-- <uni-file-picker v-model="setData.id_card_front_img" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="frontSuccess" @fail="fail" :limit="1" del-icon title="身份证正面" />
			<uni-file-picker v-model="setData.id_card_back_img" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="backSuccess" @fail="fail" :limit="1" del-icon title="身份证反面" />
			<uni-file-picker v-model="setData.license_img" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="licenseSuccess" @fail="fail" :limit="1" del-icon title="营业执照" />
			<uni-file-picker v-model="setData.door_img" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="doorSuccess" @fail="fail" :limit="1" del-icon title="门店照片" /> -->
		</view>
		<view class="button-container">
			<button class="delete-btn" @click="handleDelete">删除</button>
			<button class="update-btn" @click="handleUpdate">保存</button>
		</view>
		<cc-selectDity :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick"
			@sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>
	</view>
</template>
<script>
	import {
		storeTypes,
		goodTypes,
		editStore,
		deleteStore,
		createStore,
		areas
	} from "@/api/userApi/user.js"
	export default {
		data() {
			return {
				show: false,
				industryList: [],
				industryIndex: 0,
				industryIds: '',
				selectedIndustry: '',
				shopTypeList: [],
				shopTypeIndex: 0,
				shopTypeIds: '',
				selectedShopType: '',
				setData: {
					store_name: '',
					contact_name: '',
					mobile: '',
					goods_type_id: '',
					store_type_id: '',
					area_code: '',
					lat: '',
					lng: '',
					address: '',
					id: '',
					id_card_front_img: '',
					id_card_back_img: '',
					license_img: '',
					door_img: ''
				},
				province: "广东省",
				city: "广州市",
				area: "天河区",
				areaCode: "440106",
				pcavalue: '',
				status: 1
			};
		},
		methods: {
			handleIndustryChange(e) {
				const index = e.detail.value;
				const selectedId = this.industryIds[index];
				this.setData.goods_type_id = selectedId
				this.selectedIndustry = this.industryList[index];
			},
			handleShopTypeChange(e) {
				const index = e.detail.value;
				const selectedId = this.shopTypeIds[index];
				this.setData.store_type_id = selectedId
				this.selectedShopType = this.shopTypeList[index];
			},
			handleDelete() {
				deleteStore({
					id: this.setData.id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: "none",
							title: "删除成功"
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			handleUpdate() {
				if (this.setData.store_name == '') {
					uni.showToast({
						icon: "none",
						title: "请输入门店名称",
					})
					return
				}
				if (this.setData.mobile == '' || this.setData.mobile.length != 11) {
					uni.showToast({
						icon: "none",
						title: "请检查联系电话",
					})
					return
				}
				if (this.setData.store_type_id == '') {
					uni.showToast({
						icon: "none",
						title: "请选择所属行业",
					})
					return
				}
				if (this.setData.goods_type_id == '') {
					uni.showToast({
						icon: "none",
						title: "请选择物品类型",
					})
					return
				}
				if (this.setData.address == '') {
					uni.showToast({
						icon: "none",
						title: "请选择店铺地址",
					})
					return
				}
				if (this.status == 1) {
					createStore(this.setData).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "添加成功"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				} else {
					editStore(this.setData).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "编辑成功"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.setData.lat = res.latitude
						this.setData.lng = res.longitude
						this.setData.address = res.name
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			getStoreTypes() {
				storeTypes().then(res => {
					if (res.code == 200) {
						this.shopTypeList = res.data.list.map(item => item.title);
						this.shopTypeIds = res.data.list.map(item => item.id);
						this.shopTypeIndex = 0;
						this.selectedShopType = this.shopTypeList[this.shopTypeIndex];
					}
				})
			},
			getGoodTypes() {
				goodTypes().then(res => {
					if (res.code == 200) {
						this.industryList = res.data.list.map(item => item.title);
						this.industryIds = res.data.list.map(item => item.id)
						this.industryIndex = 0;
						this.selectedIndustry = this.industryList[this.industryIndex];
					}
				})
			},
			openPicker() {
				this.show = true
			},

			changeClick(value, value2, value3, value4) {
				this.province = value;
				this.city = value2;
				this.area = value3;
				this.areaCode = value4;
			},
			onhideShow() {
				this.show = false
			},
			//选中省市区
			onsetCity(e) {
				console.log(e);
				this.setData.area_code = e.areaCode
				let data = e.detail.target.dataset;
				this.pcavalue = data.province + data.city + data.area;
				this.show = false
			},
			// select(event) {
			// 	console.log('选择文件', event);
			// },
			// progress(event) {
			// 	console.log('上传进度', event);
			// },
			// frontSuccess(event) {
			// 	console.log('上传成功', event);
			// 	// 在这里可以根据需要处理上传成功后的逻辑，比如将图片路径保存到数据库等
			// },
			// fail(event) {
			// 	console.log('上传失败', event);
			// }
		},
		onLoad(option) {
			this.status = option.type
			if (option.type == 2) {
				const val = JSON.parse(decodeURIComponent(option.val));
				this.setData.address = val.address + val.address_info
				this.setData.contact_name = val.contact_name
				this.setData.goods_type_id = val.goods_type_id
				this.setData.id = val.id
				this.setData.lat = val.lat
				this.setData.lng = val.lng
				this.setData.mobile = val.mobile
				this.setData.store_name = val.store_name
				this.setData.store_type_id = val.store_type_id
			}
			this.getStoreTypes()
			this.getGoodTypes()
		}
	};
</script>
<style lang="scss">
	.container {
		padding: 20rpx;
		background: #f5f5f5;
		height: 100vh;

		.content {
			background-color: #fff;
			padding: 20rpx;
			width: 95%;
			margin: 0 auto;

			.info-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #f4f4f4;
				padding: 20rpx;


				.label-container {
					display: flex;
					align-items: center;

					uni-icons {
						margin-right: 10rpx;
					}

					.label {
						font-weight: 400;
						font-size: 29rpx;
						color: #333333;
					}
				}

				.value-container {
					width: 400rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					input {
						width: 100%;
						font-weight: 400;
						font-size: 25rpx;
						color: #333333;
						text-align: right;
					}

					.value {
						font-weight: 400;
						font-size: 25rpx;
						color: #333333;
						text-align: right;
					}
				}

				.picker-container {
					display: flex;
					align-items: center;

					.value {
						font-weight: 400;
						font-size: 25rpx;
						color: #333333;
					}

					.arrow {
						font-family: iconfont;
						font-size: 24rpx;
						color: #999;
						margin-left: 10rpx;
					}
				}

				.add-btn {
					display: flex;
					align-items: center;
					width: 200rpx;
					height: 80rpx;
					border: 1rpx solid #ccc;
					border-radius: 10rpx;

					.add-icon {
						font-family: iconfont;
						font-size: 30rpx;
						color: #999;
						margin-right: 10rpx;
					}

					.add-text {
						font-size: 30rpx;
						color: #999;
					}
				}
			}
		}



		.button-container {
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;

			.delete-btn {
				background-color: #fff;
				color: #333;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				width: 200rpx;
				height: 80rpx;
				font-size: 30rpx;
			}

			.update-btn {
				background-color: #007aff;
				color: #fff;
				border-radius: 10rpx;
				width: 400rpx;
				height: 80rpx;
				font-size: 30rpx;
			}
		}
	}
</style>